<template>
	<view class="content">
		<div class="swiperDiv">
			<div class="bockTop">
				<image src="../../static/head.png" mode="" class="img"></image>
				<div class="name">
					张金金
				</div>
				<div class="check" @click="bock">
					查看个人资料 >>
				</div>
				<div class="line"></div>
			</div>
		</div>
		<div class="bot-msg">
			<div class="bock1" @click="card">
				<uni-row>
					<uni-col :span="2">
						<image src="../../static/common/home1.png" mode="" class="home1"></image>
					</uni-col>
					<uni-col :span="20">
						<div class="div1">我的家人</div>
						<div class="div2">已添加1人</div>
					</uni-col>
					<uni-col :span="2">
						<image src="../../static/common/home2.png" mode="" class="home2"></image>
					</uni-col>
				</uni-row>
			</div>
			<div class="bock2">
				<uni-row>
					<uni-col :span="8">
						<div class="div1" style="margin-left: 72rpx;">就诊ID</div>
					</uni-col>
					<uni-col :span="15">
						<div style="text-align: right;">121222111</div>
					</uni-col>
				</uni-row>
			</div>
			<div class="bock3">
				<div class="title">
					医院服务记录
				</div>
				<div class="msg">
					<uni-row :gutter="32">
						<uni-col :span="12">
							<div class="msgDiv bgc1" @click="bock">
								<image src="../../static/common/home3.png" mode="" class="msgDivImg"></image>
								<div class="msgDivName">
									<span class="span1">预约记录</span>
									<span class="span2">
										<image src="../../static/common/home8.png" mode="" class="home8"></image>
									</span>
								</div>
							</div>
						</uni-col>
						<uni-col :span="12">
							<div class="msgDiv bgc2" @click="msgDiv2">
								<image src="../../static/common/home4.png" mode="" class="msgDivImg"></image>
								<div class="msgDivName">
									<span class="span1">挂号记录</span>
									<span class="span2">
										<image src="../../static/common/home8.png" mode="" class="home8"></image>
									</span>
								</div>
							</div>
						</uni-col>
						<uni-col :span="12">
							<div class="msgDiv bgc3">
								<image src="../../static/common/home5.png" mode="" class="msgDivImg"></image>
								<div class="msgDivName">
									<span class="span1">就诊记录</span>
									<span class="span2">
										<image src="../../static/common/home8.png" mode="" class="home8"></image>
									</span>
								</div>
							</div>
						</uni-col>
						<uni-col :span="12">
							<div class="msgDiv bgc4" @click="bock">
								<image src="../../static/common/home6.png" mode="" class="msgDivImg"></image>
								<div class="msgDivName">
									<span class="span1">我的账单</span>
									<span class="span2">
										<image src="../../static/common/home8.png" mode="" class="home8"></image>
									</span>
								</div>
							</div>
						</uni-col>
					</uni-row>
				</div>
				<div class="bottomMsg" @click="bock">

					<uni-row>
						<uni-col :span="3">
							<image src="../../static/common/home9.png" mode="" class="bottomMsgImg"></image>
						</uni-col>
						<uni-col :span="19">
							<div>
								修改密码
							</div>
						</uni-col>
						<uni-col :span="2">
							<image src="../../static/common/home7.png" mode="" class="home7"></image>
						</uni-col>
					</uni-row>
				</div>
				<div class="bottomMsg" @click="bock">
					<uni-row>
						<uni-col :span="3">
							<image src="../../static/common/home10.png" mode="" class="bottomMsgImg"></image>
						</uni-col>
						<uni-col :span="19">
							<div>
								修改手机号
							</div>
						</uni-col>
						<uni-col :span="2">
							<image src="../../static/common/home7.png" mode="" class="home7"></image>
						</uni-col>
					</uni-row>
				</div>
				<div class="bottomMsg" @click="bock">
					<uni-row>
						<uni-col :span="3">
							<image src="../../static/common/home11.png" mode="" class="bottomMsgImg"></image>
						</uni-col>
						<uni-col :span="19">
							<div>
								忘记密码
							</div>
						</uni-col>
						<uni-col :span="2">
							<image src="../../static/common/home7.png" mode="" class="home7"></image>
						</uni-col>
					</uni-row>
				</div>
			</div>
		</div>
	</view>

</template>

<script>
	export default {

		data() {
			return {

			}
		},
		onShow() {

		},
		onLoad(options) {
			console.log(options, "options")

		},
		methods: {
			// 挂号记录
			msgDiv2() {
				this.$common.switchTab("/pages/record/record")
			},
			// 健康卡
			card(){
				this.$common.navigateTo("/pages/card/list")
			},
			bock(){
				this.$common.msg("该功能尚未开放")
			}


		},
		mounted() {

		}
	}
</script>

<style scoped>
	.swiperDiv {
		height: 500rpx;
		background-color: #1648ce;
	}

	.bot-msg {
		position: absolute;
		top: 400rpx;
		width: 100%;
		height: calc(100% - 400rpx);
		background-color: #fff;
		border-top-right-radius: 70rpx;
	}

	.bockTop {
		text-align: center;
		padding: 36rpx 0;
	}

	.bockTop .img {
		width: 192rpx;
		height: 192rpx;
	}

	.bockTop .line {
		width: 220rpx;
		height: 1rpx;
		background-color: #fff;
		margin: 0 auto;
		margin-top: 4rpx;
	}


	.name {
		font-size: 48rpx;
		font-weight: 600;
		color: #fff;
		margin-top: 24rpx;
		margin-bottom: 12rpx;
	}

	.check {
		font-size: 28rpx;

		color: #fff;

	}

	.bock1,
	.bock2 {
		padding: 24rpx;
		margin: 36rpx 48rpx;
		background: #F5FAFF;
		border-radius: 12px 12px 12px 12px;
	}

	.bock3 {
		margin: 0 48rpx;

	}

	.bock3 .title {
		font-size: 34rpx;
		color: #112950;
	}

	.bock3 .msg {
		margin-bottom: 60rpx;
	}

	.msgDiv {

		margin-top: 24rpx;
		border-radius: 8px 8px 8px 8px;
	}

	.bgc1 {
		background: #0065FF;
	}

	.bgc2 {
		background: #FEAA48;
	}

	.bgc3 {
		background: #FD586B;
	}

	.bgc4 {
		background: #36DEED;
	}

	.msgDivImg {
		width: 88rpx;
		height: 88rpx;
		padding: 24rpx;
	}

	.msgDivName {
		color: #F7F9FA;
		font-size: 28rpx;
		padding: 0rpx 24rpx 24rpx 24rpx;
	}

	.msgDivName .span2 {
		display: inline-block;
		width: 50%;
		text-align: right;
	}

	.bottomMsg {
		height: 128rpx;
		font-size: 28rpx;
		line-height: 128rpx;
		border-bottom: 2rpx solid #F2F4F5;
	}

	.bottomMsgImg {
		width: 40rpx;
		height: 40rpx;
		vertical-align: middle;
	}

	.home1 {
		width: 48rpx;
		height: 48rpx;

	}

	.home2 {
		width: 40rpx;
		height: 40rpx;
		padding-top: 26rpx;
	}

	.home8,
	.home7 {
		width: 32rpx;
		height: 32rpx;
		vertical-align: middle;
	}

	.div1,
	.div2 {
		margin-left: 24rpx;
	}

	.div1 {
		margin-bottom: 12rpx;
		font-size: 32rpx;
		font-weight: 600;
		color: #112950;
	}

	.div2 {
		font-size: 28rpx;
		color: #666666;
	}
</style>